<template>
	<view class="dingdanliebiao">
		<u-navbar :is-back="true" :title="title" :border-bottom="false" ></u-navbar>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="" v-for="(tab,index1) in item.goodsList" :key="index1">
					<view class="shangpin" @click.stop="handleshangpinxiangqing(tab.goodsId)">
						<image :src="tab.picUrl"></image>
						<view class="shangpin-box">
							<view class="name">
								{{tab.goodsName}}
							</view>
							<view class="spec">
								{{tab.specifications[0]}}
							</view>
							<view class="price">
								<text class="price-text">￥{{tab.price}}</text>
								<text class="price-text1">x{{tab.number}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="btn" v-if="item.orderStatus == 0" @click="handlexiangqing(item.id)">去支付，{{item.shengyutime}}分钟后取消</view>
					<view class="btn1" v-if="item.orderStatus == 1">等待发货</view>
					
					<view class="btn1" v-if="item.orderStatus == 2" @click.stop="handlewuliu(item.id)">查看物流</view>
					<view class="btn2" v-if="item.orderStatus == 2" @click.stop="handlequerenshouhuo(item.id,index)">确认收货</view>
					
					<view class="btn2" v-if="item.orderStatus == 3" @click.stop="handlepingjia(item.id)">评价商品</view>
					
					<view class="btn2" v-if="item.orderStatus == 6" @click="handleshanchu(item.id,index)">删除订单</view>
					<view class="btn1" v-if="item.orderStatus != 0"  @click="handlexiangqing(item.id)">查看详情</view>
				</view>
			</view>
		</view>
		
		<view class="empty" v-if="showEmpty">
			<image src="../../static/kzt_logo@2x.png" mode=""></image>
			<text>暂无订单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				page:1,
				size:10,
				pageTotal:'',
				list:[],
				showEmpty:false,
				status:'',
				share:uni.getStorageSync('share')
			}
		},
		onLoad(options) {
			this.status = options.status
			
			if (this.status == 0) {
				this.title = '待支付'
			}
			if (this.status == 1) {
				this.title = '待发货'
			}
			if (this.status == 2) {
				this.title = '待收货'
			}
			this.getorderlist()
		},
		methods: {
			//订单列表
			async getorderlist(){
				const params = {
					page:this.page,
					size:this.size,
					status:this.status
				}
				const res = await this.$u.api.orderList(params)
				this.list = [...this.list,...res.rows]
				this.list.forEach(v=>{
					if (v.orderStatus == 0) {
						v.shengyutime = this.$u.timeFormat(new Date(v.endTime) - new Date(), 'MM')
						
					}
				})
				console.log(this.list)
				this.pageTotal = Math.ceil(res.total/this.size)
				if (res.total > 0) {
					this.showEmpty = false
				}else{
					this.showEmpty = true
				}
				uni.stopPullDownRefresh()
			},
			//订单详情
			handlexiangqing(orderId){
				const params = 'orderId=' + orderId
				uni.navigateTo({
					url:'/pages/dingdanxiangqing/dingdanxiangqing?' + params
				})
			},
			//商品详情
			handleshangpinxiangqing(goodsId){
				const params = 'goodsId=' + goodsId
				uni.navigateTo({
					url:'/pages/shangpinxiangqing/shangpinxiangqing?' + params
				})
			},
			//物流
			handlewuliu(orderId){
				const params = 'orderId=' + orderId
				uni.navigateTo({
					url:'/pages/wuliu/wuliu?' + params
				})
			},
			//删除订单
			async handleshanchu(orderId,index){
				const params = {
					orderId:orderId
				}
				const res = await this.$u.api.orderDel(params)
				this.$u.toast(res.msg)
				this.list.splice(index,1)
				if (this.list.length == 0) {
					this.showEmpty = true
				}
			},
			//确认收货
			async handlequerenshouhuo(orderId,index){
			    const params  = {
					orderId:orderId
				}	
				const res = await this.$u.api.confirm(params)
				this.$u.toast(res.msg)
				this.list.splice(index,1)
				if (this.list.length == 0) {
					this.showEmpty = true
				}
			},
			//评价
			handlepingjia(orderId){
				const params = 'orderId=' + orderId
				uni.navigateTo({
					url:'/pages/pingjia/pingjia?' + params
				})
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1
			this.list = []
			this.getorderlist()
		},
		//向上加载
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.pageTotal) {
				this.getorderlist()
			} else{
				//this.$u.toast('没有更多数据了')
			}
		},
	}
</script>

<style>
	page{
		background: #FBFBFB;
	}
</style>
<style scoped lang="scss">
    
	.list{
		padding: 28rpx 0rpx 28rpx 0rpx;
	}
	.item{
		padding:0rpx 28rpx 28rpx 28rpx;
		background: white;
		margin-bottom: 28rpx;
	}
	.shangpin{
		display: flex;
		flex-direction: row;
		padding: 28rpx 0rpx 24rpx 0rpx;
	    border-bottom: 0.5px solid #EFEFEF;
	}
	.shangpin image{
		width: 204rpx;
		height: 204rpx;
	}
	.shangpin-box{
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}
	.name{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.spec{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	.price{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.price-text{
		font-size: 32rpx;
		font-family: DIN-Medium, DIN;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
	}
	.price-text1{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	.btn-box{
		padding-top: 28rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.btn{
		padding: 14rpx 48rpx;
		background: #262520;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 32rpx;
	}
	.btn1{
		width: 180rpx;
		height: 68rpx;
		border-radius: 0px 0px 0px 0px;
		border: 1px solid #262520;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 68rpx;
		text-align: center;
		margin-left: 16rpx;
	}
	.btn2{
		margin-left: 16rpx;
		width: 180rpx;
		height: 68rpx;
		background: #262520;
		border-radius: 0px 0px 0px 0px;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
	}
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
</style>

